<template>
  <!-- 知识库页面 -->
  <div class="page-content">
    <!-- 页面标题和操作区 -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-6 gap-2">
      <div>
        <h1 class="text-2xl font-bold text-neutral-900">知识库</h1>
        <p class="text-neutral-500 mt-1">管理和浏览你的文档集合</p>
      </div>
      <div class="flex space-x-1.5">
        <div class="relative">
          <el-button Plain size="large" class="w-full" :icon="Filter">筛选</el-button>
        </div>
        <div class="relative">
          <el-button Plain size="large" class="w-full" :icon="Sort">排序</el-button>
        </div>
        <el-button size="large" type="primary"
          class="w-full flex items-center space-x-1 px-2 py-1 bg-primary text-white rounded-md text-sm font-medium hover:bg-primary/90 transition-colors"
          :icon="Plus">新建文档</el-button>
      </div>
    </div>

    <!-- 文档列表 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
      <!-- 文档卡片 1 -->
      <div v-for="document in documents" :key="document.title"
        class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
        <div class="p-2.5">
          <div class="flex justify-between items-start mb-1.5">
            <div class="flex items-center">
              <h3 class="font-semibold text-neutral-900 hover:text-primary transition-colors">
                {{ document.title }}
              </h3>
            </div>
            <div class="flex space-x-1">
              <button class="p-1.5 rounded hover:bg-neutral-100 text-primary transition-colors" title="已收藏">
                <i class="fa fa-star"></i>
              </button>
              <button
                class="p-1.5 rounded hover:bg-neutral-100 text-neutral-500 hover:text-neutral-700 transition-colors"
                title="更多选项">
                <i class="fa fa-ellipsis-v"></i>
              </button>
            </div>
          </div>
          <p class="text-sm text-neutral-600 mb-2 line-clamp-1">
            {{ document.description }}
          </p>
          <div class="flex flex-wrap gap-1 mb-2">
            <span v-for="tag in document.tags" :key="tag"
              class="px-1 py-0.5 bg-neutral-100 text-neutral-600 text-xs rounded">#{{ tag }}</span>
          </div>
          <div class="flex justify-between items-center text-xs text-neutral-500 pt-1 border-t border-neutral-100">
            <div class="flex items-center">
              <i class="fa fa-clock-o mr-1"></i>
              <span>{{ document.wordCount }} 字</span>
            </div>
            <span>更新于 {{ document.updateTime }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="mt-5 flex justify-center">
      <el-pagination background :current-page="currentPage" hide-on-single-page :page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]" :total="total" layout="prev, pager, next" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Filter, Sort, Plus } from '@element-plus/icons-vue'

const allDocuments = ref([
  {
    title: '组件设计规范',
    description:
      '详细介绍了组件设计的原则、风格指南、交互模式和实现标准，确保团队开发的组件具有一致性。',
    tags: ['设计指南', '组件规范', 'UI/UX'],
    wordCount: '2.4k 字',
    updateTime: '昨天 09:15',
    isCollected: true,
  },
  {
    title: 'API 调用最佳实践',
    description:
      '介绍了 API 调用的最佳实践，包括错误处理、请求缓存、身份验证、速率限制和性能优化等方面的内容。',
    tags: ['开发指南', 'API', '最佳实践'],
    wordCount: '1.8k 字',
    updateTime: '1 周前',
    isCollected: false,
  },
  {
    title: '状态管理指南',
    description:
      '详细讲解了前端应用中的状态管理策略，包括本地状态、全局状态、服务端状态的管理方式和适用场景。',
    tags: ['开发指南', '状态管理', 'React', 'Vue'],
    wordCount: '3.2k 字',
    updateTime: '2 周前',
    isCollected: false,
  },
  {
    title: '项目部署流程',
    description:
      '描述了项目从开发环境到生产环境的完整部署流程，包括构建、测试、打包、发布和监控等环节。',
    tags: ['运维文档', '部署', 'CI/CD'],
    wordCount: '1.5k 字',
    updateTime: '3 周前',
    isCollected: false,
  },
])

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const documents = ref([] as typeof allDocuments.value)

const fetchDocuments = (page: number, size: number) => {
  const start = (page - 1) * size
  const end = start + size
  total.value = allDocuments.value.length
  documents.value = allDocuments.value.slice(start, end)
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  fetchDocuments(currentPage.value, pageSize.value)
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
  fetchDocuments(currentPage.value, pageSize.value)
}

fetchDocuments(currentPage.value, pageSize.value)
</script>

<style lang="scss" scoped></style>
